<script setup>
import apiApp from '@/api/app'
import apiUser from '@/api/system/user'
import EditPasswordForm from '@/components/AccountForm/EditPasswordForm.vue'
import useUserStore from '@/store/modules/user'
import userAvatar from './userAvatar.vue'

const userStore = useUserStore()
const { proxy } = getCurrentInstance()

const active = ref(0)
const tabs = ref([
  {
    title: '基本设置',
    description: '账号的基本信息设置',
  },
  {
    title: '修改密码',
    description: '定期修改密码可以提高帐号安全性',
  },
])

const userCredentials = ref([])

const data = reactive({
  form: {},
  rules: {
    nickname: [{ required: true, message: '用户姓名不允许为空', trigger: 'blur' }],
    email: [{ required: true, message: '邮箱地址不允许为空', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
    mobile: [{ required: true, message: '手机号码不允许为空', trigger: 'blur' }, { pattern: /^1[3-9|]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
  },
})

const { form, rules } = toRefs(data)

const user = ref({
  nickname: null,
  mobile: null,
  email: null,
  sex: null,
})

function getProfile() {
  apiUser.getUserProfile().then((res) => {
    form.value = res.data
    user.value = Object.assign({}, user.value, res.data)
  })
}

/** 重置操作表单 */
function reset() {
  form.value = Object.assign({}, form.value, user.value)
};
getProfile()
/** 提交按钮 */
function submit() {
  proxy.$refs.userRef.validate((valid) => {
    if (valid) {
      apiUser.updateUserProfile(form.value).then((response) => {
        proxy.$modal.success('修改成功')
      })
    }
  })
};


function changeTab(index) {
  active.value = index
}
</script>

<template>
  <div class="min-h-full w-full">
    <div class="fixed inset-s-0 bottom-0 top-0 h-full w-40 border-e">
      <div v-for="(tab, index) in tabs" :key="index"
        class="cursor-pointer px-4 py-3 transition-background-color space-y-2 hover-bg-accent/50"
        :class="{ 'bg-accent hover-bg-accent!': active === index }" @click="changeTab(index)">
        <div class="text-base text-accent-foreground leading-tight">
          {{ tab.title }}
        </div>
        <div class="text-xs text-accent-foreground/50">
          {{ tab.description }}
        </div>
      </div>
    </div>
    <div class="ms-40 min-h-full flex-col-center">
      <div v-if="active === 0" class="w-full flex-col-stretch-center p-10">
        <div class="text-center" style="padding: 10px;">
          <userAvatar :user="userStore.ossUrl(form.avatar)" />
        </div>
        <el-form ref="userRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="用户名">
            <el-tag>{{ form.username }}</el-tag>
          </el-form-item>
          <el-form-item label="用户姓名" prop="nickname">
            <el-input v-model="form.nickname" maxlength="30" />
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="form.mobile" maxlength="11" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" maxlength="50" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="0">
                男
              </el-radio>
              <el-radio label="1">
                女
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">
              保存
            </el-button>
            <el-button @click="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <EditPasswordForm v-if="active === 1" />
      
    </div>
  </div>
</template>
